<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left" />

        <q-toolbar-title>
          木鱼
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="left" side="left" bordered>
    <q-list class="rounded-borders text-primary">
      <q-item
        clickable
        v-ripple
        :active="link === 'index'"
        @click="link = 'index'"
        active-class="my-menu-link"
        to="/"
        exact
      >
        <q-item-section avatar>
          <q-icon name="dashboard" />
        </q-item-section>

        <q-item-section>首页</q-item-section>
      </q-item>

      <q-item
        clickable
        v-ripple
        :active="link === 'list'"
        @click="link = 'list'"
        active-class="my-menu-link"
        to="/list"
        exact
      >
        <q-item-section avatar>
          <q-icon name="format_list_bulleted" />
        </q-item-section>
        <q-item-section>任务管理</q-item-section>
      </q-item>

      <q-item
        clickable
        v-ripple
        :active="link === 'money'"
        @click="link = 'money'"
        active-class="my-menu-link"
        to="/money"
        exact
      >
        <q-item-section avatar>
          <q-icon name="attach_money" />
        </q-item-section>

        <q-item-section>财务管理</q-item-section>
      </q-item>

      <q-separator spaced />

      <q-item
        clickable
        v-ripple
        :active="link === 'settings'"
        @click="link = 'settings'"
        active-class="my-menu-link"
        to="/settings"
        exact
      >
        <q-item-section avatar>
          <q-icon name="settings" />
        </q-item-section>

        <q-item-section>个人设置</q-item-section>
      </q-item>

      <q-item
        clickable
        v-ripple
        :active="link === 'help'"
        @click="link = 'help'"
        active-class="my-menu-link"
        to="/help"
        exact
      >
        <q-item-section avatar>
          <q-icon name="help" />
        </q-item-section>

        <q-item-section>帮助</q-item-section>
      </q-item>
    </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

  </q-layout>
</template>

<script>
export default {
  data () {
    return {
      left: false,
      link: 'index'
    }
  }
}
</script>
<style lang="sass">
.my-menu-link
  color: white
  background:#1976D2
</style>
